<template>
  <div class="pro">
    公司产品<br>
    <h2>我是{{state.name}},你是{{state.name2}}</h2>
    <button @click='changeName'>改变name1</button> <br>
    <h2>{{refmsg}}</h2>
    <button @click='changeMsg'>改变msg</button> <br>
    <input type="text" v-model="model"> 
    <h2>{{model}}</h2>
  </div>
</template>

<script>
// 利用解构的方法导入 hooks变成本质就是在vue中调用多个函数方法，最终组合成为一个应用
import {defineComponent ,reactive,ref} from 'vue'
export default defineComponent({
  // name : 'pro'
  setup() {
    // 其他逻辑都要写在这个里面
    // 在vue3 中创建响应式 对象的方法
    const  state = reactive({
      name:'喜洋洋',
      name2:'灰太狼'
    })
    const refmsg = ref('我是ref方法定义的数据')
    const model = ref('我是双向绑定')
   
    // 定义的方法也是要在setup中 要使用申明式
    const changeName = () =>{
      state.name = '喜洋洋1'
      state.name2 = '喜洋洋2'
    }
    const changeMsg = ()=>{
      refmsg.value = '喜羊羊与灰太狼'
      console.log(111);
      model.value = '喜羊羊与灰太狼'
    }
    // retrun 放在最后 方法也要return出去
     return {
      state,
      changeName,
      refmsg,
      changeMsg,
      model
    }
  }
  // 在 setup 里面我们要把用到的数据给return出去
 
})
</script>

<style>

</style>